<template>
  <div>
    <nav-top title="就诊地址"
             :goback="true"></nav-top>
    <section class="address">
      <div class="addressList">
        <van-radio-group  v-model="active">
          <van-radio class="content"
          @click="selectCoupon(key)"
                     v-for="(val,key) in addressList"
                     :key="key"
                     :name="val.id">
            <img class="radio-icon"
                 slot="icon"
                 :src="key == active ? '/static/icon/select-select.png' : '/static/icon/select-none.png'" />
            <div>
              <p class="hospital-name">{{val.name}}</p>
              <p class="hospital-address">{{val.address}}</p>
            </div>
          </van-radio>
        </van-radio-group>
      </div>
      <van-button @click='submit'
                  class="submit"
                  type="primary"
                  size="large">确定</van-button>
    </section>
  </div>
</template>
<script>
import NavTop from "@/components/nav/navBar";
import { domain, search } from './../../api'
import axios from 'axios'
export default {
  components: {
    NavTop
  },
  data () {
    return {
      active: -1,
      addressList: [
        {
          id: 1,
          name: "",
          address: ""
        },
      ],
      selectAddress: {}
    };
  },
  created () {

    [this.selectAddress] = this.addressList;
    if(search('id')){
      axios.get(domain+"/api/old/hospital/address?id="+search('haid'))
      .then((res)=>{
        if(res.data.code == 1){
          this.addressList = res.data.data
        }else{
          this.$dialog.alert({ title: '发生错误', message: res.data.err })
        }
      })
      .catch((err)=>{
        this.$dialog.alert({ title: '发生错误', message: err })
      })
    }
  },
  methods: {
    selectCoupon (key) {
      this.active = key;
      this.selectAddress = this.addressList[key]
      console.log( this.selectAddress)
    },
    submit () {
      this.$cookies.set('said',this.addressList[this.active].id)
      window.location.href = "/product/order"+window.location.search 
    }
  }
};
</script>
<style lang="scss" scoped>
.address {
  width: 320px;
  .addressList {
    margin-top: 66px;

    .content {
      position: relative;
      width: 300px;
      height: 88px;
      margin: 23px auto;
      border-radius: 5px;
      border: 1px solid #f4f4f4;
      .radio-icon {
        position: absolute;
        top: 17px;
        width: 16px;
        height: 15px;
        margin-left: 7px;
      }
      p {
        margin: 0;
        margin-left: 21px;
        width: 252px;
      }
      .hospital-name {
        font-size: 13px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(31, 31, 31, 1);
        padding-top: 17px;
        line-height: 1em;
      }
      .hospital-address {
        padding-top: 7px;
        font-size: 11px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 1.5em;
      }
    }
  }
  .submit {
    width: 279px;
    height: 44px;
    margin: 83px 20.5px 0 20.5px;
    // position: absolute;
    // left: 21px;
    // bottom: 15px;
    font-size: 15px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    background: #06a44f;
    border: none;
  }
}
</style>